<template>
    <div class="mar-t-20 mar-l-10 mar-r-10">
        <div class="flex">
			<div class="mar-r-15">
				<span class="font-14">用户名称：</span>
				<el-input v-model="screen.form.name" placeholder="请输入用户名称" size="small" style="width: 240px;"></el-input>
			</div>
			
			<div class="mar-r-15">
				<span class="font-14">用户角色：</span>
				<el-select v-model="screen.form.type" placeholder="请选择用户类型" size="small" filterable clearable>
					<el-option v-for="(item, index) in screen.typeList" :key="index" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</div>
			
			<div>
				<el-button type="primary" size="small">搜索</el-button>
			</div>
		</div>
		
		<div class="mar-t-20">
			<!-- 此处只可以添加讲师账号 -->
			<el-button type="primary" size="small" icon="el-icon-plus" @click="showAddAccount()">添加账号</el-button>
		</div>
		
		<el-table :data="tableData" border class="mar-t-10" v-loading="tableLoading" :cell-style="{padding: 0, height: '50px'}">
			<el-table-column type="selection" width="60" align="center"></el-table-column>
			<el-table-column label="序号" prop="id" width="60"></el-table-column>
			<el-table-column label="账号" prop="account"></el-table-column>
			<el-table-column label="用户名称" prop="name"></el-table-column>
			<el-table-column label="联系方式" prop="phone"></el-table-column>
			<el-table-column label="用户角色" prop="role"></el-table-column>

			<el-table-column label="当前状态" prop="status">
				<template slot-scope="props">
					<div v-if="props.row.status === 0" class="color-a21600">禁用</div>
					<div v-else class="color-1f8a24">已开通</div>
				</template>
			</el-table-column>

			<el-table-column label="操作" width="220">
				<template slot-scope="props">
					<div>
						<el-button type="text" v-if="props.row.status === 0" style="color: #1f8a24;">开通</el-button>
						<el-button type="text" v-else style="color: #a21600;">禁用</el-button>
						<el-button type="text" style="color: #1e9fff;">编辑</el-button>
						<el-button type="text" style="color: #fe4a49;">分配角色</el-button>
						<el-button type="text" style="color: #a21600;">删除</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<div class="mar-t-20 flex justify-center">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pages.currentPage"
				:page-sizes="pages.pageSizes"
				:page-size="pages.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pages.total">
			</el-pagination>
		</div>

		<!-- 添加账号弹窗 -->
		<el-dialog title="添加用户" :visible.sync="update.show" width="700px" :before-close="closeAddAccount" :close-on-click-modal="false">
			<div>
				111111
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button @click="closeAddAccount" size="mini">取 消</el-button>
				<el-button type="primary" size="mini" @click="addAccount()">添 加</el-button>
			</span>
		</el-dialog>
    </div>
</template>

<script>
    export default {
		name: "UserManage",
        data () {
            return {
				// 筛选
				screen: {
					form: {
						name: "",
						type: ""
					},
					typeList: [
						{ id: 1, name: "普通用户" },
						{ id: 2, name: "讲师" },
						{ id: 3, name: "超级管理员" }
					]
				},
				
				// 表格数据
				tableData: [],

				// 分页
				pages: {
					currentPage: 1,
					pageSize: 10,
					pageSizes: [10, 20, 50, 100],
					total: 0
				},
				
				// 表格加载动画
				tableLoading: false,

				// 添加（编辑）用户弹窗
				update: {
					show: false
				}
            }
        },
		
		methods: {
			// 查询用户列表
			findUserList () {
				let data = [
					{
						id: 1,
						name: "石敬山",
						account: "dashan",
						role: "超级管理员",
						phone: "15155356103",
						status: 1
					}
				];

				this.tableData = data;
			},

			// pageSize 改变时得回调
			handleSizeChange (val) {
				this.pages.paageSize = val;
				this.findUserList();
			},

			// currentPage 改变时得回调
			handleCurrentChange (val) {
				this.pages.currentPage = val;
				this.findUserList();
			},

			// 显示添加用户弹窗
			showAddAccount () {
				this.update.show = true;
			},

			// 添加账号
			addAccount () {

			},

			// 关闭添加账号弹窗
			closeAddAccount () {
				this.update.show = false;
			}
		},

        created () {
			this.findUserList();
        }
    }
</script>
